<template>
  <view class="x-subsection">
    <view class="sub_item" :class="{'sub_item_active':index==subSectiveActive}" v-for="(item,index) in list" :key="index" @click="handleChange(index,item)">
      {{item.name}}
    </view>
  </view>
</template>

<script setup>

import {
  ref, onMounted, watch
} from 'vue';
const props = defineProps({
  list: {
    type: Array,
    default() {
      return []
    }
  },
  activeIndex: {
    type: [Number, String],
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  },
  autoActive: {
    type: Boolean,
    default: false
  }
})

const subSectiveActive = ref(0)
const emits = defineEmits(['change'])

onMounted(() => {
  subSectiveActive.value = props.activeIndex
})

watch(() => props.activeIndex, (newValue) => {
  subSectiveActive.value = newValue
})

const handleChange = (index, value) => {
  if (props.disabled) return;
  if (props.autoActive) {
    subSectiveActive.value = index
  }
  emits('change', index, {
    ...value
  })
}
</script>

<style lang="scss">
.x-subsection {
  display: flex;
  font-size: 28rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  // color: rgba(0, 0, 0, 0.6);

  .sub_item {
    flex: 1;
    padding: 20rpx 0;
    text-align: center;
    background: rgba(72, 106, 239, 0.14);
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #486aef;
  }

  .sub_item_active {
    background: #486aef;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }
}
</style>